<div class="lx-select"
     ng-class="{ 'lx-select--error': lxSelect.error,
                 'lx-select--fixed-label': lxSelect.fixedLabel && lxSelect.viewMode === 'field',
                 'lx-select--is-active': (!lxSelect.multiple && lxSelect.getSelectedModel()) || (lxSelect.multiple && lxSelect.getSelectedModel().length) || (lxSelect.choicesViewMode === 'panes' && lxSelect.areChoicesOpened()),
                 'lx-select--is-disabled': lxSelect.ngDisabled,
                 'lx-select--is-multiple': lxSelect.multiple,
                 'lx-select--is-unique': !lxSelect.multiple,
                 'lx-select--theme-light': !lxSelect.theme || lxSelect.theme === 'light',
                 'lx-select--theme-dark': lxSelect.theme === 'dark',
                 'lx-select--valid': lxSelect.valid,
                 'lx-select--custom-style': lxSelect.customStyle,
                 'lx-select--default-style': !lxSelect.customStyle,
                 'lx-select--view-mode-field': !lxSelect.multiple || (lxSelect.multiple && lxSelect.viewMode === 'field'),
                 'lx-select--view-mode-chips': lxSelect.multiple && lxSelect.viewMode === 'chips',
                 'lx-select--panes': lxSelect.choicesViewMode === 'panes',
                 'lx-select--with-filter': lxSelect.displayFilter,
                 'lx-select--autocomplete': lxSelect.autocomplete }">
    <span class="lx-select-label" ng-if="!lxSelect.autocomplete">
        {{ lxSelect.label }}
    </span>

    <lx-dropdown id="dropdown-{{ lxSelect.uuid }}" lx-width="{{ (lxSelect.choicesViewMode === 'panes') ? '' : '100%' }}"
                 lx-effect="{{ lxSelect.autocomplete ? 'none' : 'expand' }}">
        <ng-transclude></ng-transclude>
    </lx-dropdown>
</div>
